<%@ page language="java" pageEncoding="utf-8" isELIgnored="false"%>

<%String title="购物车"; %>

<%@ include file="../header.jsp" %>


<form method="post" action="my/createOrder.do">
<div class="container my-5">
	<h5>购物车</h5><hr/>
	<c:if test="${empty carts}">
	<div style="margin:300px 0">
	<p class="h6 text-center my-5">你的购物车没有任何课程..<a href="<%=baseUrl%>">逛一逛吧</a></p>
	</div>
	</c:if>
	
	<c:if test="${!empty carts}">
	<c:forEach items="${carts}" var="cart">
	<input type="hidden" name="subject" value="${cart.title}"/>
	<div class="row my-3">
		<div class="col-1">
			<input type="checkbox" value="${cart.id}" name="courseId" data:price="${cart.price}">
		</div>
		<div class="col-4">
			<a href="course/detail.do?id=${cart.id}"><img src="${cart.img}" width="200" /></a>
		</div>
		<div class="col-4 h6">
			<a href="course/detail.do?id=${cart.id}">${cart.title}</a>
		</div>
		<div class="col-3 h4 text-danger">￥${cart.price}</div>
	</div>
	</c:forEach>
	<hr/>
	<input type="hidden" name="actualPrice" id="textActualPrice"/>
	<div class="pull-right mr-5 mt-2">
		<p class="my-2"><input type="checkbox"> 新人50元优惠券</p>
		<p class="my-2">课程总价：￥<span id="totalPrice">0</span>元</p>
		<p class="my-1">优惠：￥<span id="">0</span>元</p>
		<p class="my-1">实付总价：￥<span id="actualPrice">0</span>元</p>
		<p class="my-3"><button type="submit" class="btn btn-danger">下单</button></p>
	</div>
	</c:if>
	
	<div class="clearfix"></div>
</div>
</form>


<%@ include file="../footer.jsp" %>
<script>
$(function(){
	
	$('input[name=courseId]').click(function(){
		var totalPrice = 0;
		
		$('input[name=courseId]').each(function(i, n){
			var courseId = n.value;
			var price = $(n).attr('data:price');
			price = parseInt(price);
			
			if(n.checked) { //选中状态累加价格
				totalPrice += price;
			}
			
			$('#totalPrice').text(totalPrice);
			$('#actualPrice').text(totalPrice);
			$('#textActualPrice').val(totalPrice);
		})
	})
		
})
</script>